import { ref, onMounted, onUnmounted, onBeforeMount } from 'vue'

/**
 * @description 获取设备类型
 */

export enum DeviceType {
  Mobile,
  Desktop,
}



export function useResize() {

  const WIDTH = 992 // refer to Bootstrap's responsive design

  // 判断是否是手机端
  const isMobile = () => {
    const rect = document.body.getBoundingClientRect()
    return rect.width - 1 < WIDTH
  }


  onMounted(() => {
    window.addEventListener('resize', isMobile)
  })

  onUnmounted(() => {
    window.addEventListener('resize', isMobile)
  })

  return { isMobile }
}
